<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="__JS__/layui-v2.3.0/css/layui.css">
<style>
.content-1{margin-bottom: 10px;}
.cover-wrap{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;}
#clipBtn{width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;}
#file{cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;}
.but-1{width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;}
#view{width:200px;height:200px;}
.box-1{width:90%;height:90%;background-color:#FFFFFF;overflow: hidden;border-radius:4px;position: absolute;left:5%;top:5%;}
.layui-layer-loading .layui-layer-content {
    margin: 0 auto;
}
</style>
</head>
<body>
<div class="content">
    <div class="cover-wrap">
        <div class="box-1">
            <div id="clipArea" style="margin:10px;height:80%;"></div>
            <div style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                <button id="clipBtn">保存封面</button>
            </div>
        </div>
    </div>
    <div id="view"></div>
    <div class="but-1">点击上传封面图<input type="file" id="file"></div>
</div>
<script src="__STATIC__/layui/js/jquery/jquery-1.9.1.min.js"></script>
<script src="__JS__/layui-v2.3.0/layui.js"></script>
<script src="__STATIC__/layui/js/photoClip/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/layui/js/photoClip/hammer.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/layui/js/photoClip/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/layui/js/photoClip/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC__/layui/js/jquery/jquery.base64.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    //上传封面
    var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [200, 200],// 截取框的宽和高组成的数组。默认值为[260,260]
        outputSize: [200, 200], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
        //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
        file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
        view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
        ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
        outputQuality: 1, //输出质量，取值 0 - 1，默认为0.8
        loadStart: function () {
            // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
            $('.cover-wrap').fadeIn();
            // console.log("照片读取中");
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.load(2);
            }); 

        },
        loadComplete: function () {
            // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
            console.log("照片读取完成");

            layui.use('layer', function () {
                var layer = layui.layer;
 
     
                    layer.closeAll('loading');
          
            }); 

        },
        //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
        clipFinish: function (dataURL) {
            // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
            $('.cover-wrap').fadeOut();
            $('#view').css('background-size', '100% 100%');


            //上传到七牛云------------------------------------开始
            // var token;
            // $.ajaxSettings.async = false;//ajax同步
            // //ajax从后台七牛云获取token
            // $.post("{:url('admin/tools/getQiniuToken')}?name=test", function (msg) {
            //     token = msg.data;
            // })
            // var file_name = $.base64.encode('2018-8-2202');//文件名称进行base64编码
            // var addr = [
            //     'upload.qiniu.com',         // 华东
            //     'upload-z1.qiniu.com',      // 华北
            //     'upload-z2.qiniu.com',      // 华南
            //     'upload-na0.qiniu.com',     // 北美
            // ];
            // var baseImg = dataURL.substring(23);//处理base64图片编码
            // $.ajax(
            //     {
            //         url: 'http://' + addr[2] + '/putb64/-1/key/' + file_name,
            //         type: 'POST',
            //         beforeSend(request) {
            //             request.setRequestHeader('Content-Type', 'application/octet-stream')
            //             request.setRequestHeader('Authorization', 'UpToken ' + token) // token服务端请求
            //         },
            //         data: baseImg,
            //         timeout: 1000,
            //         success: function (data) {
            //             console.log(data)
            //         }
            //     })
            //上传到七牛云------------------------------------结束
        }
    });
</script>
</body>
</html>